<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue的组件化x</title>
        <script src="../public/vue2.7.14-dev.js"></script>
    </head>
    <body>
        <div id="app">
            <ol>
                <todo-item
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id"></todo-item>
            </ol>
        </div>


        <script>
        // 定义名为 todo-item 的新组件
        Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        })
        //为什么这里不用在根组件注册？？？？？？
        //因为是全局组件，这里是声明全局注册
        
                
        var app = new Vue({
            el:"#app",
            data: {
            groceryList: [
              { id: 0, text: '蔬菜' },
              { id: 1, text: '奶酪' },
              { id: 2, text: '随便其它什么人吃的东西' }
            ]
        }
        })
    </script>
    </body>
</html>